import locale from './locale';
import {
  createInbizSchema,
  createReactiveBaseSchema,
  createBaseSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createBizStyleSchema,
} from '@inbiz/setters';

export const defaultProps = {
  headerStyle: {
    icon: { color: '', type: 'icon-yingyongzhongxin' },
  },
  viewtype: 'card',
  rowCount: 4,
  showSearch: true,
  showGroup: true,
  style: {
    padding: '0px 20px 15px 20px',
  },
};

export const propsSchema = createInbizSchema({
  attribute: {
    group_viewType: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            viewtype: {
              type: 'string',
              enum: ['card', 'simple'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'card',
              },
            },
          },
        },
      },
      platform: 'web',
    },
    ...createReactiveBaseSchema({
      // rowCount: {
      //   type: 'number',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'NumberPicker',
      //   'x-component-props': {
      //     min: 1,
      //     max: 8,
      //   },
      //   platform: 'web',
      // },
      showSearch: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          defaultValue: true,
        },
      },
      // showGroup: {
      //   type: 'boolean',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Switch',
      //   'x-component-props': {
      //     defaultValue: true
      //   }
      // }
    }),
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema({}, {}),
    }),

    ...createDecoratorStyleSchema(),
  },
});

export const defaultBehavior = {
  name: 'AppCenter',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'AppCenter',
  designerProps: { propsSchema },
  designerLocales: locale,
};

export const resource = {
  icon: 'AppCenter',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'appCenter.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'AppCenter',
        'x-component-props': defaultProps,
      },
    },
  ],
};
